import 'package:flutter/material.dart';

class IntervalTransition extends StatefulWidget {
  @override
  _IntervalTransitionState createState() => _IntervalTransitionState();
}

class _IntervalTransitionState extends State<IntervalTransition>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 5),
      vsync: this,
    )..repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('IntervalTransition demo')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TransitionWidget(
                controller: _controller,
                interval: Interval(0.0, 0.2),
              ),
              TransitionWidget(
                controller: _controller,
                interval: Interval(0.2, 0.4),
              ),
              TransitionWidget(
                controller: _controller,
                interval: Interval(0.4, 0.6),
              ),
              TransitionWidget(
                controller: _controller,
                interval: Interval(0.6, 0.8),
              ),
            ],
          ),
        ));
  }
}

class TransitionWidget extends StatelessWidget {
  final AnimationController controller;
  final Interval interval;

  TransitionWidget({@required this.controller, @required this.interval});

  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: Tween(begin: Offset(0, -0.25), end: Offset(0.1, 0.2))
          .chain(CurveTween(curve: Curves.easeInOut))
          .chain(CurveTween(curve: interval))
          .animate(controller),
      child: Container(
        width: 300,
        height: 100,
        decoration: BoxDecoration(
          color: Colors.blue,
          // border: Border.all(color: Colors.blue),
        ),
      ),
    );
  }
}
